import React from "react"
import { useState } from "react"
import { createContext } from "react"

export const MyContext = createContext()
export const ContextDemo = ({ children, someword }) => {
  console.log(someword)
  const [person, setPerson] = useState({ name: 'Bob', age: 28, gender: 'man' })
  const login = () => {
    console.log('用户登录')
  }
  const logout = () => {
    console.log('用户退出了...')
  }
  const getUserInfo = async () => {
    return person
  }
  const changeUser = () => {
    setPerson({ name: 'Tim', age: 13, gender: 'woman' })
  }
  const addAge = () => {
    setPerson({ ...person, age: person.age + 1 })
  }
  const { name, age, gender } = person
  return (
    <div>
      <h1>useContext的使用方式</h1>
      <h3>用户信息展示,{someword}</h3>
      <ul>
        <li>姓名:{name} </li>
        <li>年龄: {age}</li>
        <li>性别: {gender}</li>
      </ul>
      <button onClick={() => setPerson({ ...person, name: '夏天' })}>修改姓名</button>
      <button onClick={() => setPerson({ ...person, age: age + 1 })}>添加年龄</button>
      <MyContext.Provider value={{ login, logout, addAge, person, getUserInfo, changeUser }}>
        {children}
      </MyContext.Provider>
    </div>
  )
}

